<template>
  <div class="contene">
    <myNavbar title="子账号管理"></myNavbar>
        <list>
          <cell  v-for="item in memberlists">
            <div class="detailed-box-content" >
                <div class="detailed-title_app">
                  <image  :src="item.avatar" class="mine-list-item-headImage" ></image>
                  <div class="detailed-title">
                    <text class="detailed-name">{{item.nickname}}</text>
                    <text class="detailed-referer">推荐:{{item.referrer}}</text>
                  </div>
                </div>
                <div class="price-content">
<!--                  <div>-->
<!--                    <text class="price" v-if="item.status==0" @click="toOrder(item)">去下单 </text>-->
<!--                  </div>-->
                  <div>
<!--                    v-if="item.status==1"-->
                    <text class="price"  @click="switchAccount(item)">切换账号 </text>
                  </div>
                </div>
            </div>
          </cell>
          <cell>
            <div class="coupon-none" v-if="memberlists.length==0" >
              <image class="coupon-none-image" src="http://cdn.rzico.com/v4.0/footprint-none.png"></image>
              <div class="coupon-none-text">暂无子账号</div>
            </div>
          </cell>
          <loading @loading="onloading" :display="loadinging ? 'show' : 'hide'" class="loading">
            <text class="indicator-text">Loading ...</text>
            <loading-indicator></loading-indicator>
          </loading>

        </list>


    <div class="mine-list-button">
      <div class="address-list-button botton_Bg_Color" @click="toRegister">
        <text class="address-title">添加子账号</text>
      </div>
    </div>

  </div>
</template>
<script>
import { list,switchUser } from '../../../api/subUser';
import {
  list as wxPageList
} from '../../../api/wxPage'

import myNavbar from '../../../components/myNavbar/myNavbar.vue'
export default({
  components: {
    myNavbar
  },
  data () {
    return {
      currentTab: 0,
      memberlists:[],
      pageSize:20,
      pageNum:1,
      loadinging:false,
      explosionSpike:"2", //2是爆款秒杀
      pageIds:""

    }
  },
  created () {
    this.memberListclick()
    this.getPageId()

  },

  methods: {
     getPageId(){
       var _this =this
       wxPageList({
         mchId: this.getGlobalData().mchId,
         pageNum: this.pageNum,
         pageSize: this.pageSize,
         sortField: 'orders',
         direction: 'asc'
       }).then(res => {
         res.data.data.forEach(item=>{
           if (_this.explosionSpike == item.orders){
             _this.pageIds = item.id
             console.log(_this.pageIds)
           }
         })
       })
     },
      toOrder(item){
          var _this = this
          switchUser({
              userId:item.id
          }).then(res => {
              if (res.type == 'success') {
                  let globalData = _this.getGlobalData();
                  globalData.token = res.data.token;
                  globalData.userInfo = res.data.userInfo;
                  _this.setGlobalData(globalData)
                  umengPush.addAlias(res.data.userInfo.id, 'userId', result=>{
                  });
                  eeui.openPage({
                          params:this.pageIds,
                          url: 'root://pages/index/wxPage/wxPage',
                          statusBarType: 'immersion',
                          statusBarStyle: false
                      }, (result) => {}
                  );
              }
          }).catch(error => {})
    },
      toRegister() {
          let _this = this;
          eeui.openPage({
                  params:2,
                  url: 'root://pages/member/subRegistration/register',
                  statusBarType: 'immersion',
                  statusBarStyle: false
              }, (result) => {
              _this.pageNum = 1;
              _this.memberListclick();

              }
          );
      },
    switchAccount(item){
      var _this = this
      switchUser({
        userId:item.id
      }).then(res => {
        if (res.type == 'success') {
          let globalData = _this.getGlobalData();
          globalData.token = res.data.token;
          globalData.userInfo = res.data.userInfo;
          _this.setGlobalData(globalData)
          umengPush.addAlias(res.data.userInfo.id, 'userId', result=>{
             eeui.closePage()
          });
        }
      }).catch(error => {

      })

    },
    onloading(event) {
      // console.log("揍你");
      this.loadinging = true
      setTimeout(() => {
        this.loadinging = false
        this.pageNum += 1
        this.memberListclick()
      }, 1000)
    },
    memberListclick(){

      list({pageSize:this.pageSize,pageNum:this.pageNum}).then(res=>{
          // console.log(res)

          if (this.pageNum==1) {
              this.memberlists =[]
          }
        res.data.data.forEach(item=>{
          if(!this.isNull(item.avatar)){
            item.avatar=this.thumbnail(item.avatar,100,100)
          }else{
            item.avatar='http://cdnx.hulu.fj.cn/00/00/rBD_P13JAWCASx16AAAbC4KUH28426.png'
          }
          item.createDate=this.formatTime(item.createDate)
          this.memberlists.push(item)
        })

      })
    },
  }
})
</script>
<style>
.contene {
  flex: 1;
  background-color: rgba(248, 248, 248, 0.8);
}

.mine-list-button {
  align-items: center;
  justify-content: center;
  bottom: 20px;
  margin-bottom: 40px;
}

.address-list-button {
  margin-top: 20px;
  padding: 0;
  border-radius: 100px;
  width: 710px;
  height: 82px;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: red;
}

.address-title {
  color: white;
  font-family: PingFangSC;
  font-weight: 400;
  font-size: 28px;
}


.detailed-box-content {
  width: 710px;
  background-color:#fff;
  margin-left: 20px;
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom-width: 2px;
  border-bottom-color: #E6E6E6;
  border-bottom-style: solid;
  box-sizing: border-box;
  border-radius: 16px;
}

.detailed-title_app{
  display: flex;
  width: 500px;
  flex-direction: row;

}
.detailed-title {
  margin-left: 20px;
  width: 300px;
  height: 140px;
  display: flex;
  flex-direction: column;
  /* height: 80px; */
  justify-content: space-between;
  /* background-color:seagreen */
}

.price-content{
  padding-top: 10px;
  padding-left:20px;
  padding-bottom: 10px;
  padding-right: 20px;
  border-width: 1px;
  border-color: red;
  height: 60px;
  margin-bottom: 10px;
}
.detailed-name {
  font-size: 32px;
  margin-top: 10px;
}
.detailed-referer {
  font-size: 28px;
  margin-bottom: 10px;
  color:#999999;
}
.mine-list-item-headImage {
  maring-top:10px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  border-style: solid;
  border-width: 2px;
  border-color: #fff;
  margin-left: 10px;
}
.price{
  font-size: 27px;
  color: coral;
}
.coupon-none{
  width: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top:560px;
}
.coupon-none-image {
  text-align: center;
  display: block;
  margin: 0 auto;
  width: 196px;
  height:131px;
}
.coupon-none-text {
  text-align: center;
  letter-spacing: 5px;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 42px;
  opacity: 0.3;
  margin-top: 30px;
}
.loading {
  width: 750px;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}

.indicator-text {
  color: #888888;
  font-size: 22px;
  text-align: center;
  padding-top: 20px;
}

</style>
